<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="public/include :: header" />
    <meta name="renderer"  content="webkit">
 	<meta name="keywords" th:content="${biz.video.cevTitle}">
	<meta name="description" th:content="${biz.video.cevDesc}">
    <title>[[${biz.video.cevTitle}]]</title>
    <th:block th:include="public/include :: supervideo-css" />
    
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/headfoot.css" />
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/second.css">
    <style type="text/css">
     #videoContainer {
	    width: 800px;
	    height: 500px;
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 20px;
      }
      .videoDiv{
      	width: 800px;
	    height: 500px;
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 20px;
      }
      
    </style>
</head>

<body class="huibg">
   

    <div class="main-md" style="height: 600px;">
        <div class="bgff pad20" style="height: 100%;">
            <div class="se_tit">
                <h2 class="fnt_18 col_666">播放：[[${biz.video.cevTitle}]]</h2>
            </div>
            <div class="" style="height: 90%;">
                <!-- 外部视频展示 -->
                <div style="height: 100%;" th:if="${biz.video.videoType} eq 'third'" th:utext="${biz.video.thirdCode}"></div>
                <!-- 本地视频 -->
                <div id="videoContainer" th:if="${biz.video.videoType} eq 'local'" th:vurl="${biz.video.videoPath}" class="hidden"></div>
                <!-- 本地视频原生模式 -->
                <video th:if="${biz.video.videoType} eq 'local'" th:src="${biz.video.videoPath}" controls="controls" loop="loop" preload="auto" class="videoDiv"></video>
                
            </div>
        </div>
    </div>
    
    
    <th:block th:include="public/include :: footer" />
    <th:block th:include="public/include :: supervideo-js" />
    <script src="/js/index.js"></script>
    <script>
       var vtype = "[[${biz.video.videoType}]]";
       var baseUrl = "[[${#httpServletRequest.scheme}]]://[[${#httpServletRequest.serverName}]]:[[${#httpServletRequest.serverPort}]][[${#servletContext.contextPath}]]";
   	
        $(function() {
	        if(vtype=='local'){
	        	//playVideo(baseUrl+$("#videoContainer").attr("vurl"));
	        	console.log("播放本地视频");
	        }
        });
        
        //播放本地视频
    	function playVideo(url){
    		const nextControl = new Super.NextControl() // 实例化“下一个”按钮控件
    	    const Dbspeen = new Super.Dbspeen() // 倍速控件
    	    const fullScreenControl = new Super.FullScreenControl() // 实例化“全屏”控件
    	    const video = new Super.Svideo('videoContainer', {
    	        source: new Super.VideoSource({ // 引入视频资源
    	          src: url
    	        }),
    	        leftControls: [nextControl], // 控件栏左槽插入控件
    	        rightControls: [Dbspeen, fullScreenControl] // 控件栏右槽插入控件
    	    })
    	    video.addEventListener('change', (event) => { // 监听video各属性变化
    	       console.log(event)
    	    })
    	    nextControl.addEventListener('click', () => { // 监听“下一个”按钮控件点击事件
    	    	console.log('click next menu !!!');
    	    })
    	    fullScreenControl.addEventListener('fullscreen', () => { // 监听进入全屏
    	    	//下面区域隐藏
    	      console.log('is fullscreen !!!')
    	    })
    	    fullScreenControl.addEventListener('cancelfullscreen', () => { // 监听退出全屏
    	      console.log('cancel fullscreen !!!')
    	    })
    	}
    </script>
</body>

</html>